import '../assets/css/home.less'
import { Outlet } from 'react-router';
import { Flex, Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
import Menu from '../components/layout/Menu';
import WebHeader from '../components/layout/WebHeader';

const layoutStyle = {
  width: '100%',
  height: '100vh',
};
const headerStyle: React.CSSProperties = {
  height: 64,
  padding:'inherit',
  backgroundColor: '#f4f4f4',
  borderBottom: "1px solid #e5e5e5"
};
const siderStyle: React.CSSProperties = {
  backgroundColor: '#f4f4f4',
  overflowY:'auto'
 
};
const contentStyle: React.CSSProperties = {
  backgroundColor:'#fff',
  overflowY:'auto',
  padding:'20px'

};
function Home() {
  return (
    <Layout  style={layoutStyle}>
      <Header style={headerStyle}>
        <WebHeader></WebHeader>
      </Header>
    <Layout>
      <Sider width="90" style={siderStyle}>
        <Menu></Menu>
      </Sider>
      <Content style={contentStyle}>
         <Outlet></Outlet>
      </Content>
    </Layout>
  </Layout>

    // <div className="body">
    //     <div className="menu"><Menu></Menu></div>
    //     <div className="main"><Outlet></Outlet></div>
       
    // </div>
  );
}
export default Home;